<template>
    <form @submit.prevent="handleLogin">
    <div class="form-container">
      <label for="username">Username:</label>
      <input type="text" id="username"  class="centered-element" v-model="loginData.username" required />
    </div>
    <div class="form-container">
      <label for="password">Password:</label>
      <input type="password" id="password"  class="centered-element" v-model="loginData.password" required />
    </div>
    <button type="submit">Login</button>
    <p v-if="errorMessage">{{ errorMessage }}</p>
  </form>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
const loginData = ref({
  username: '',
  password: ''
});
const errorMessage = ref('');
const handleLogin = async () => {
  try {
    const response = await axios.post('http://localhost:8088/user/login', new URLSearchParams({
      username: loginData.value.username,
      password: loginData.value.password
    }), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    });
    console.log(response)
    if (response.status) {
      // 登录成功后的处理逻辑
      alert('登录成功');
      // 可以在这里重定向到其他页面或其他操作
      router.push({ name: 'Home' });
    } else {
      // 设置错误信息
      errorMessage.value = '登录失败，请检查用户名和密码';
    }
  } catch (error) {
    // 请求失败处理
    console.error('There was an error!', error);
    errorMessage.value = '请求出错，请稍后再试';
  }
};
</script>
<style>
body,
html {
    height: 100%;
    /* 设置html和body的高度为100%，以确保容器可以相对于视口高度进行设置 */
    margin: 0;
    /* 移除默认边距 */
}

body {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中 */
}

.form-container {
    display: flex;
    flex-direction: column;
    /* 确保子元素垂直排列 */
    gap: 1em;
    /* 在元素之间添加间距 */
}

.centered-element {
    width: 200px;
    /* 根据需要调整宽度 */
    padding: 0.5em;
    /* 内边距 */
    font-size: 1rem;
    /* 文字大小 */
    box-sizing: border-box;
    /* 包括内边距和边框在元素的总宽度和高度中 */
}
</style>